<template>
  <el-dialog
    :title="editId ? '编辑用户' : '添加用户'"
    :visible="isShowUserdialog"
    width="50%"
    @close="cannel"
  >
    <!-- 表单区域 -->
    <el-form
      ref="addRef"
      :model="addform"
      :rules="addformRules"
      label-width="120px"
      :label-position="labelPosition"
      class="add=el-form"
    >
      <el-form-item label="企业名称" prop="shortName">
        <el-input v-model="addform.shortName" clearable></el-input>
      </el-form-item>
      <el-form-item label="所属公司" prop="company">
        <el-input v-model="addform.company" clearable></el-input>
        <p>https://www.tianyancha.com （在此可查询所属公司全称及简称）</p>
      </el-form-item>

      <el-form-item label="城市地区" prop="province">
        <el-select
          style="width: 200px"
          class="selectinput"
          v-model="addform.province"
          placeholder="请选择城市"
          @change="provinceschild"
        >
          <el-option
            v-for="(item, index) in provincesDateList"
            :key="index"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
        <el-select
          style="width: 200px"
          v-model="addform.city"
          placeholder="请选择地区"
        >
          <el-option
            v-for="(item, index) in cityDataList"
            :key="index"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="方向(企业标签)" prop="tags">
        <el-input v-model="addform.tags"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remarks">
        <el-input
          v-model="addform.remarks"
          type="textarea"
          placeholder="请输入"
          clearable
        ></el-input>
      </el-form-item>
    </el-form>
    <!-- /表单区域 -->
    <span slot="footer" class="dialog-footer">
      <el-button @click="cannel">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { provinces, citys } from '@/api/hmmm/citys'
import { add, update, detail } from '@/api/hmmm/companys'
export default {
  name: 'articles-add',
  props: {
    isShowUserdialog: {
      type: Boolean,
      required: true
    },
    editId: {
      type: Number
    }
  },
  data() {
    return {
      provincesDateList: [], // 城市地区列表
      cityDataList: [], // 地区列表
      // 表单对象
      addform: {
        id: this.editId,
        isFamous: false,
        shortName: '',
        company: '',
        province: '',
        city: '',
        tags: '',
        remarks: '',
        number: ''
      },
      labelPosition: 'right',
      // 表单验证规则对象
      addformRules: {
        shortName: [
          { required: true, message: '请输入企业名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        company: [
          { required: true, message: '所属公司不能为空', trigger: 'blur' }
        ],
        province: [{ required: true, message: '请选择省份', trigger: 'blur' }],
        city: [{ required: true, message: '请选择地区', trigger: 'blur' }],
        tags: [{ required: true, message: '请输入标签', trigger: 'blur' }],
        remarks: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    cannel() {
      this.$refs.addRef.resetFields()
      this.$emit('update:isShowUserdialog', false)
      setTimeout(() => {
        this.$emit('update:editId', 0)
      }, 500)
    },
    provinceschild(e) {
      this.cityDataList = citys(e)
      this.addform.city = this.cityDataList[0]
    },
    // 调接口添加用户
    async confirm() {
      try {
        if (this.editId) {
          // 编辑
          // debugger
          await update({
            id: this.addform.id,
            isFamous: false,
            shortName: this.addform.shortName,
            company: this.addform.company,
            province: this.addform.province,
            city: this.addform.city,
            tags: this.addform.tags,
            remarks: this.addform.remarks,
            number: this.addform.number
          })
          this.$emit('updatelist')
          this.$message.success('修改成功')
        } else {
          await this.$refs.addRef.validate()
          await add(this.addform)
          this.$refs.addRef.resetFields()
          this.$emit('updatelist')
          this.$message.success('添加成功')
        }
      } catch (error) {}
    },
    async loadEditdetail(id) {
      // console.log(id)
      const res = await detail(id)
      this.addform = res.data
    }
  },
  mounted() {
    this.provincesDateList = new provinces()
  },
  created() {}
}
</script>

<style scoped lang="less">
// .el-input {
//   // width: 400px;
//   // height: 36px;
// }
// /deep/.el-textarea {
//   width: 400px;
// }
.add-el-form {
  width: 80%;
}
.selectinput {
  margin-right: 25px;
}
// /deep/.label-tags {
//   padding-left: 10px;
// }
/deep/.el-dialog__body {
  padding: 30px 110px;
}
/deep/.el-dialog__footer {
  text-align: right;
  display: flex;
  justify-content: center;
}
</style>
